<html>
  <head>
    <title>speechreco test</title>
    <script>
function cls() {
  document.getElementById('log').innerHTML = '';
}

function log(msg) {
  var d = new Date();
  var t = d.getHours() + ':' +
          d.getMinutes() + ':' +
          d.getSeconds() + '.' +
          d.getMilliseconds();
  var table = document.getElementById('log');
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(-1);
  var time = document.createElement("pre");
  time.innerHTML = t;
  cell1.appendChild(time);
  var cell2 = row.insertCell(-1);
  var message = document.createElement("pre");
  message.innerHTML = msg;
  cell2.appendChild(message);
}

function res2str(results) {
  if (!results || !results.length)
    return "<no items>";
  var s = '';
  for (var i = 0; i < results.length; ++i) {
    s += "&nbsp;" + i + ":{";
    var r = results[i];
    s += typeof(r) + ",";
    if (r.final)
      s += '(final) ';
    s += '[';
    for (var i = 0; i < r.length; ++i) {
      s += r.item(i).transcript + ' (' + r.item(i).confidence + ')';
      if (i != r.length - 1)
        s += ',<br>&nbsp;&nbsp;&nbsp;';
    }
    s += ']';
    s += "}<br>";
  }
  return s;
}

function setup() {
  try {
    window.reco = new webkitSpeechRecognition();
  } catch(e) {
    document.write("The Web Speech API is not supported by this browser.");
    return;
  }

  reco.maxAlternatives = 25;

  // Set default handlers.
  for (var prop in reco) {
    if (!prop.match('^on'))
      continue;
    reco[prop] = function() {
      log('on' + event.type);
    }
  }

  // Set specific handlers.
  reco.onerror = function(e) {
    log('onerror ' + e.error);
  }
  reco.onresult = function(e) {
    try {
      log('onresult ' + res2str(e.results));
    } catch(ex) {
      log('onresult - exception');
    }
  }

  if (reco.onresults != undefined) {
    log('onresults exists');
  }

  log('created reco object');
}

function start() {
  log('start()');
  reco.continuous = document.getElementById('continuous').checked;
  reco.interimResults = document.getElementById('interim').checked;
  log('reco.continuous = ' + reco.continuous);
  log('reco.interimResults = ' + reco.interimResults);
  try {
    reco.start();
  } catch(e) {
    log('exception: ' + e);
  }
}

function stop() {
  log('stop()');
  reco.stop();
}

function abort() {
  log('abort()');
  reco.abort();
}

function startOther() {
  log('startOther()');
  var other = new webkitSpeechRecognition();
  other.continuous = true;

  // Set default handlers.
  for (var prop in other) {
    if (!prop.match('^on'))
      continue;
    other[prop] = function() {
      log('other on' + event.type);
    }
  }

  other.start();
}
    </script>
  </head>
  <body onload="setup()">
    <input type="button" onclick="cls()" value="cls">
    <input type="button" onclick="start()" value="start()">
    <input type="button" onclick="stop()" value="stop()">
    <input type="button" onclick="abort()" value="abort()">
    <input type="button" onclick="startOther()" value="startOther()">
    <input type="checkbox" checked id="continuous">continuous
    <input type="checkbox" checked id="interim">interimResults
    <!-- <pre id="log"></pre> -->
    <table id="log" width="350px" border="0"></table>
  </body>
</html>
